<template>
	<view class="pb-safe-area">
		<view class="x-navbar x-navbar-sticky x-navbar-body"
			:style="[`--bg-opacity:${opacity.navbar}`, '--padding:0px', `padding-top:${PLATFORM.statusBarHeight}px`]">
			<view class="x-navbar-icons" @tap="$page.back()">
				<uni-icons type="left" size="24" color="var(--xl-dark)"></uni-icons>
			</view>
			<view class="x-navbar-icons"></view>
			<view class="x-navbar-content"></view>
			<view class="x-navbar-tools">
				<button class="btn-primary" size="mini" @tap="submit">发表</button>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="x-navbar-mp-weixin ml-6"></view>
			<!-- #endif -->
		</view>
		<view class="p-8 flex flex-column grid-gap-4">
			<view class="flex">
				<textarea class="flex-1 h9 line-height-1" v-model="form.content" :maxlength="1000"
					placeholder="这一刻你的想法..." auto-height style="min-height: 100px;"></textarea>
			</view>
			<x-uploads v-model="form.images" :gap="2" :limit="9" fill :margins="64" v-if="!form.video"></x-uploads>
			<x-more loadmore="或" v-if="!form.video&&!form.images.length"></x-more>
			<x-uploads v-model="form.video" type="video" :gap="2" fill :margins="64" placeholder="选择视频" placeholderIcon="videocam" v-if="!form.images.length"></x-uploads>
			<x-more loadmore="标记"></x-more>
			<view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg-white" @tap="viewRoleShow = true">
				<uni-icons :type="form.view_role !== 'public' ? 'person-filled' : 'person'"
					:color="form.view_role !== 'public' ? 'var(--xl-primary)' : 'var(--xl-grey)'" size="20"></uni-icons>
				<text class="flex-1 h9" :class="[form.view_role !== 'public' ? 'text-primary' : 'text-grey']">谁可以看</text>
				<x-picker v-model:show="viewRoleShow" v-model="form.view_role" keyName="name"
					:columns="[[{ name: '公开', value: 'public' }, { name: '已关注', value: 'fans' }]]"
					confirm-color="var(--xl-primary)" @confirm="viewRoleConfirm">
					<text class="h9 font-weight-600" :class="[form.view_role !== 'public' ? 'text-primary' : 'text-grey']"> {{
						form.view_role_text }} </text>
				</x-picker>
				<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
			</view>
		</view>
		<x-loading v-if="loading" />
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { $api, $message, $page } from '@/utils';
import { onPageScroll, onLoad } from '@dcloudio/uni-app';
import { usePlatformStore, useRefs } from "@/stores";
const PlatformStore = usePlatformStore();
const { PLATFORM } = useRefs(PlatformStore);
const opacity = ref<{
	navbar: number | string
}>({
	navbar: 0,
});
const top = ref(0);
watch(() => top.value, (val: number) => {
	if (val < -10) {
		return;
	}
	opacity.value.navbar = val > 50 ? 1 : (val / 50).toFixed(1);
})
onPageScroll(({ scrollTop }: { scrollTop: number }) => {
	top.value = scrollTop;
})
const loading = ref(false);
const viewRoleShow = ref(false);
const form = ref({
	content: '',
	view_role: 'public',
	view_role_text: '公开',
	video:'',
	images: []
});
const viewRoleConfirm = (val: any) => {
	form.value.view_role_text = val.name
}
const submit = () => {
	loading.value = true;
	$api.Moments.release(form.value).then((res: any) => {
		loading.value = false;
		$message.success(res.msg)
		uni.navigateBack();
	}).catch((err:any) => {
		$message.error(err.msg)
		loading.value = false;
	})
}
onLoad(() => {
})
</script>

<style lang="scss" scoped></style>
